<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="lib/js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/js/vue-router.js" type="text/javascript"></script>


</head>
<body>
<div id="app">

    <router-link to="/account">Account </router-link>

    <router-view></router-view>


</div>

<template id="temp1">
    <div>
        <h1> 这是Account组件</h1>
        <router-link to="/account/login">登录 </router-link>
        <router-link to="/account/register">注册 </router-link>
        <router-view></router-view>
    </div>
</template>

<script>

    var account ={
        template:'#temp1'
    }

    var login = {
        template:'<h1>登录</h1>'
    }

    var res = {
        template:'<h1>注册</h1>'
    }


    var router = new VueRouter({
        routes:[
            {
                path:'/account',
                component:account,
                children:[
                    {path:'/account/login',component:login},
                    {path:'/account/register',component:res}
                ]
            },
        ]
    })
    // 创建一个vue实例
    new Vue({
        el:'#app',
        data:{
            msg:'信息'
        },
        methods:{
        },
        router: router
    })
</script>
</body>
</html>
